import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/*
props：
  props是组件上注册的一些自定义属性用于向子组件传递数据，可以用于传递任意数量任意类型的props
父组件：
  <template>
    <div id="app">
      <!--使用props给子组件传递数据-->
      <son :count="count" :str="str" :bool="bool" :person="person"></son>
    </div>
  </template>
  <script>
子组件：
  <script>
    export default {
      name: "son",
      // 接收父组件传递过来的props
      props: ["count", "str", "bool", "person"]
    }
  </script>

----------------------------------------------------------------------------------------

props的校验：
父组件：
    <BaseProgress :width="width"></BaseProgress>
子组件：
    <script>
      export default {
        name: "BaseProgress",
        props: {
          width: {
            type: Number,//限制props的类型
            required: true,//限制必填项
            default: 10//限制默认值,
            validator(value) { // 自定义校验
              if (value <= 100) {
                return true //校验通过
              } else {
                return false //校验不通过
              }
            }
          }
        }
      }
  </script>

 ---------------------------------------------------------------------------------------

props必须是单向数据流：
    props和data都是提供数据的但是props是外部传递的数据，data是属于自己的数据
    data数据是属于自己的可以随便更改
    props数据是外部传递的不能直接更改，要遵循单向数据流
    单向数据流：父级的props更新会向下流动，影响子组件这个数据流动是单向的

    父组件给子组件传递props，子组件不能直接修改父组件传递过来的props，但是可以通过自定义事件通知父组件去修改
    <BaseProgress :width="width" @add="width++" @sub="width--"></BaseProgress>
* */